<template>
  <!-- 登陆 -->
  <div class="addBank">
    <div class="input">
      <label>姓名</label>
      <input
        type="text"
        v-model="bankInfo.realName"
        maxlength="11"
        placeholder="请输入姓名"
      />
    </div>
    <div class="input">
      <label>身份证号</label>
      <input
        type="text"
        v-model="bankInfo.idcard"
        maxlength="18"
        placeholder="请输入身份证号"
      />
    </div>
    <div class="input">
      <label>银行卡号</label>
      <input
        type="text"
        v-model="bankInfo.bankNumber"
        maxlength="20"
        placeholder="请输入银行卡号"
      />
    </div>
    <div class="input">
      <label>开户行</label>
      <div
        class="bd"
        @click="_targetBankState"
      >{{bankInfo.name}}</div>
    </div>
    <div class="input">
      <label>支行</label>
      <input
        type="text"
        v-model="bankInfo.others"
        placeholder="请输入支行"
      />
    </div>
    <div class="input">
      <label>开户行地址</label>
      <input
        type="text"
        v-model="bankInfo.address"
        placeholder="请输入开户行地址"
      />
    </div>
    <div class="btn_c">
      <button
        class="btn"
        @click="_addBankCheck"
      >确定</button>
    </div>
    <div
      class="select"
      v-show="isBank"
    >
      <div class="wrapper">
        <div class="head">
          <span>选择银行</span>
        </div>
        <ul class="list">
          <li
            class="item"
            v-for="(item, i) in bankList"
            :key="i"
            @click="_checkSelect(item)"
          >{{item}}</li>
        </ul>
      </div>
      <div
        class="fuc"
        @click="_targetBankState"
      ></div>
    </div>
  </div>

</template>

<script>
import {request} from '@/wxRequest/requestApi'

export default {
	data() {
		return {
			bankInfo: {
				userId: wx.getStorageSync('userId'),
				others: '',
				idcard: '',
				bankNumber: '',
				name: '请选择',
				address: '',
				realName: '',
			},
			bankList: [], //银行卡列表
			isBank: false, //状态
		}
	},
	created() {},
	onShow() {
		this._getBankList()
	},
	onUnload() {
		this.bankInfo = {
			userId: wx.getStorageSync('userId'),
			others: '',
			idcard: '',
			bankNumber: '',
			name: '请选择',
			address: '',
			realName: '',
		}
	},
	methods: {
		/**
		 * 获得银行卡列表
		 * @private
		 */
		_getBankList() {
			let params = {
				url: '/getBankAll',
				method: 'POST',
				data: {},
			}

			request(params).then(re => {
				if (re.status === 0) {
					this.bankList = re.data
				}
			})
		},
		/**
		 * 选择银行卡
		 * @param name [String] 银行卡名
		 * @private
		 */
		_checkSelect(name) {
			this.bankInfo.name = name
			this.isBank = false
		},
		/**
		 * 切换状态
		 * @private
		 */
		_targetBankState() {
			this.isBank = !this.isBank
		},
		/**
		 * 添加银行卡之前验证
		 * @private
		 */
		_addBankCheck() {
			let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
			let pattern = /^([1-9]{1})(\d{14}|\d{18})$/
			if (this.bankInfo.realName === '') {
				wx.showModal({
					title: '提示',
					content: '请输入姓名',
				})
				return
			}
			if (this.bankInfo.idcard === '') {
				wx.showModal({
					title: '提示',
					content: '请输入身份证号',
				})
				return
			}

			if (!reg.test(this.bankInfo.idcard)) {
				wx.showModal({
					title: '提示',
					content: '身份证号不合法',
				})
				return
			}

			if (this.bankInfo.bankNumber === '') {
				wx.showModal({
					title: '提示',
					content: '请输入银行卡号',
				})
				return
			}

			if (!pattern.test(this.bankInfo.bankNumber)) {
				wx.showModal({
					title: '提示',
					content: '银行卡号不合法',
				})
				return
			}

			if (this.bankInfo.name === '请选择') {
				wx.showModal({
					title: '提示',
					content: '请选择开户行',
				})
				return
			}

			if (this.bankInfo.others === '') {
				wx.showModal({
					title: '提示',
					content: '请输入支行',
				})
				return
			}

			if (this.bankInfo.address === '') {
				wx.showModal({
					title: '提示',
					content: '请输入开户行地址',
				})
				return
			}

			this._sendAddBank()
		},
		/**
		 * 执行发送
		 * @private
		 */
		_sendAddBank() {
			let params = {
				url: '/AddBank',
				method: 'POST',
				data: this.bankInfo,
			}

			request(params).then(re => {
				if (re.status === 0) {
					wx.showModal({
						title: '提示',
						content: re.data,
						success: function() {
							wx.navigateBack(-1)
						},
					})
				} else {
					wx.showModal({
						title: '提示',
						content: re.msg,
					})
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.addBank {
	width: 100%;
	.input {
		border-bottom: 1px solid #949393;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		background: #fff;
		line-height: 80rpx;
		padding: 20rpx;
		border-bottom: 1px solid #ccc;
		&:nth-child(1) {
			margin-top: 20rpx;
		}
		&:nth-child(3) {
			margin-top: 20rpx;
		}
		label {
			font-size: 13px;
			color: #323232;
			font-weight: 500;
		}
		input {
			font-size: 13px;
			padding-top: 15rpx;
			text-align: right;
		}
		input:placeholder {
			font-size: 13px;
		}
		.bd {
			font-size: 14px;
			color: #666666;
		}
	}
	.btn_c {
		width: 100%;
		margin-top: 20px;
		.btn {
			width: 95%;
			margin: auto;
			background: #fecb55;
		}
	}
	.select {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
		.fuc {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
		.wrapper {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 60%;
			overflow: hidden;
			background-color: #fff;
			z-index: 100;
			.head {
				position: absolute;
				display: flex;
				height: 45px;
				padding: 0 10px;
				top: 0;
				left: 0;
				width: 100%;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				color: #fecb55;
				border-bottom: 1px solid #fecb55;
				background-color: #fff;
				box-sizing: border-box;
			}
			.list {
				width: 100%;
				height: 100%;
				padding-top: 45px;
				overflow: auto;
				.item {
					line-height: 40px;
					border-bottom: 1px solid #e4e4e4;
					text-align: center;
					font-size: 14px;
				}
			}
		}
	}
}
</style>

